<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import EchartDemo from '@/components/Echart/demo.vue'
import LineChart from '@/components/Echart/line/lineChart.vue'
import EchartPie from '@/components/Echart/pie/index.vue'
const chartPieSexData = reactive({
  name: 'sexPie',
  legend: {
    top: '35%',
  },
  data: [
    { value: 2048, name: '男' },
    { value: 1305, name: '女' },
    { value: 1305, name: '其他' },
  ],
})
// 子组件执调用
const refSexPie = ref(null)
const upDataDemo3 = () => {
  chartPieSexData.data.push({ value: 500, name: 'pang pang' }) // 更新数据
  refSexPie.value.createChart()
}
const chartData = reactive({
  name: 'Demo',
  data: [
    { value: 1048, name: 'Search Engine' },
    { value: 735, name: 'Direct' },
    { value: 580, name: 'Email' },
    { value: 484, name: 'Union Ads' },
    { value: 300, name: 'Video Ads' },
  ],
})

const refDemo = ref(null)
const upDataDemo = () => {
  console.log('子组件执调用，upDataDemo被执行了')
  ElMessage({
    message: '我是子组件的方法',
    type: 'success',
  })
  chartData.data.push({ value: 500, name: 'pang pang' }) // 更新数据
  refDemo.value.createChart()
}

const chartData2 = reactive({
  name: 'Demo2',
  data: [
    { value: 1048, name: 'Search Engine' },
    { value: 735, name: 'Direct' },
    { value: 580, name: 'Email' },
    { value: 484, name: 'Union Ads' },
    { value: 300, name: 'Video Ads' },
  ],
})

const chartData3 = reactive({
  name: 'Demo3',
  //data:[['1月','1048'],['2月','1048'],['3月','1048'],['4月','1048'],['5月','1048'],['6月','1048'],['7月','1048'],['8月','1048'],['9月','1048'],['10月','1048'],['11月','1048'],['12月','1048']]
  data: [
    { value: 1048, name: '一月' },
    { value: 735, name: '二月' },
    { value: 580, name: '三月' },
    { value: 484, name: '四月' },
    { value: 300, name: '五月' },
    { value: 1048, name: '六月' },
    { value: 735, name: '七月' },
    { value: 580, name: '八月' },
    { value: 484, name: '九月' },
    { value: 300, name: '十月' },
    { value: 484, name: '十一月' },
    { value: 300, name: '十二月' },
  ],
})

const refDemo2 = ref(null)
const upDataDemo2 = () => {
  console.log('子组件执调用，upDataDemo2被执行了')
  chartData2.data.push({ value: 500, name: '大屏' }) // 更新数据
  refDemo2.value.createChart()
}

// 各大区域占比
const areaTitle = {
  title: '性别占比',
  style: 'style1',
  textAlign: 'left',
}
</script>

<template>
  <el-carousel class="carousel" :autoplay="false" :interval="5000">
    <el-carousel-item>
      <card-box>
        <template v-slot:title>
          <h1>这是图表1</h1>
        </template>
        <EchartDemo
          :ref="'ref' + chartData.name"
          :chart-data="chartData"
          @handelUpData="upDataDemo"
        />
      </card-box>
    </el-carousel-item>
    <el-carousel-item>
      <card-box>
        <template v-slot:title>
          <h1>这是图表2</h1>
        </template>
        <EchartDemo
          :ref="'ref' + chartData2.name"
          :chart-data="chartData2"
          @handelUpData="upDataDemo2"
        />
      </card-box>
    </el-carousel-item>
  </el-carousel>

  <el-carousel class="carousel" :interval="5000">
    <el-carousel-item>
      <card-box>
        <template v-slot:title>
          <h1>性别占比</h1>
        </template>
        <EchartPie
          :ref="'ref' + chartPieSexData.name"
          :chart-data="chartPieSexData"
          @handelUpData="upDataDemo3"
        />
      </card-box>
    </el-carousel-item>
  </el-carousel>
  <card-box>
    <template v-slot:title>
      <h1>这是图表4</h1>
    </template>
    <LineChart
      :ref="'ref' + chartData3.name"
      :chart-data="chartData3"
      @handelUpData="upDataDemo2"
    />
  </card-box>
</template>

<style lang="scss" scoped>
.carousel {
  width: 100%;
}
</style>
